<template>
    <div id="box">
        <div class="top">
            <h6>首页</h6>
        </div>
        <div class="first_main" style="margin-top:35px">
            <h4>营收情况</h4>
            <ul class="revenue">
                <li>
                    <div>
                        <svg t="1669034180101" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="31221" width="44" height="44">
                            <path
                                d="M622 342H302c-16.57 0-30-13.43-30-30s13.43-30 30-30h320c16.56 0 30 13.43 30 30s-13.44 30-30 30zM462 542H302c-16.57 0-30-13.43-30-30s13.43-30 30-30h160c16.57 0 30 13.43 30 30s-13.43 30-30 30zM402 742H302c-16.57 0-30-13.44-30-30s13.43-30 30-30h100c16.57 0 30 13.44 30 30s-13.43 30-30 30zM712 942c-126.82 0-230-103.18-230-230s103.18-230 230-230 230 103.18 230 230-103.18 230-230 230z m0-400c-93.73 0-170 76.27-170 170s76.27 170 170 170 170-76.27 170-170-76.27-170-170-170z"
                                p-id="31222" fill="#ffffff"></path>
                            <path
                                d="M492 942H212c-71.68 0-130-58.32-130-130V212c0-71.68 58.32-130 130-130h500c71.68 0 130 58.32 130 130v206.97c0 16.57-13.44 30-30 30s-30-13.43-30-30V212c0-38.59-31.41-70-70-70H212c-38.59 0-70 31.41-70 70v600c0 38.59 31.41 70 70 70h280c16.57 0 30 13.44 30 30s-13.43 30-30 30z"
                                p-id="31223" fill="#ffffff"></path>
                            <path
                                d="M712 742c-16.56 0-30-13.44-30-30v-60c0-16.56 13.44-30 30-30s30 13.44 30 30v60c0 16.56-13.44 30-30 30z"
                                p-id="31224" fill="#ffffff"></path>
                            <path
                                d="M812 742H712c-16.56 0-30-13.44-30-30s13.44-30 30-30h100c16.56 0 30 13.44 30 30s-13.44 30-30 30z"
                                p-id="31225" fill="#ffffff"></path>
                        </svg>
                    </div>
                    <div>
                        <p>今日订单收入</p>
                        <p>￥66666.66</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg t="1669034180101" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="31221" width="44" height="44">
                            <path
                                d="M622 342H302c-16.57 0-30-13.43-30-30s13.43-30 30-30h320c16.56 0 30 13.43 30 30s-13.44 30-30 30zM462 542H302c-16.57 0-30-13.43-30-30s13.43-30 30-30h160c16.57 0 30 13.43 30 30s-13.43 30-30 30zM402 742H302c-16.57 0-30-13.44-30-30s13.43-30 30-30h100c16.57 0 30 13.44 30 30s-13.43 30-30 30zM712 942c-126.82 0-230-103.18-230-230s103.18-230 230-230 230 103.18 230 230-103.18 230-230 230z m0-400c-93.73 0-170 76.27-170 170s76.27 170 170 170 170-76.27 170-170-76.27-170-170-170z"
                                p-id="31222" fill="#ffffff"></path>
                            <path
                                d="M492 942H212c-71.68 0-130-58.32-130-130V212c0-71.68 58.32-130 130-130h500c71.68 0 130 58.32 130 130v206.97c0 16.57-13.44 30-30 30s-30-13.43-30-30V212c0-38.59-31.41-70-70-70H212c-38.59 0-70 31.41-70 70v600c0 38.59 31.41 70 70 70h280c16.57 0 30 13.44 30 30s-13.43 30-30 30z"
                                p-id="31223" fill="#ffffff"></path>
                            <path
                                d="M712 742c-16.56 0-30-13.44-30-30v-60c0-16.56 13.44-30 30-30s30 13.44 30 30v60c0 16.56-13.44 30-30 30z"
                                p-id="31224" fill="#ffffff"></path>
                            <path
                                d="M812 742H712c-16.56 0-30-13.44-30-30s13.44-30 30-30h100c16.56 0 30 13.44 30 30s-13.44 30-30 30z"
                                p-id="31225" fill="#ffffff"></path>
                        </svg>
                    </div>
                    <div>
                        <p>今日订单数量</p>
                        <p>￥666</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg t="1669034180101" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="31221" width="44" height="44">
                            <path
                                d="M622 342H302c-16.57 0-30-13.43-30-30s13.43-30 30-30h320c16.56 0 30 13.43 30 30s-13.44 30-30 30zM462 542H302c-16.57 0-30-13.43-30-30s13.43-30 30-30h160c16.57 0 30 13.43 30 30s-13.43 30-30 30zM402 742H302c-16.57 0-30-13.44-30-30s13.43-30 30-30h100c16.57 0 30 13.44 30 30s-13.43 30-30 30zM712 942c-126.82 0-230-103.18-230-230s103.18-230 230-230 230 103.18 230 230-103.18 230-230 230z m0-400c-93.73 0-170 76.27-170 170s76.27 170 170 170 170-76.27 170-170-76.27-170-170-170z"
                                p-id="31222" fill="#ffffff"></path>
                            <path
                                d="M492 942H212c-71.68 0-130-58.32-130-130V212c0-71.68 58.32-130 130-130h500c71.68 0 130 58.32 130 130v206.97c0 16.57-13.44 30-30 30s-30-13.43-30-30V212c0-38.59-31.41-70-70-70H212c-38.59 0-70 31.41-70 70v600c0 38.59 31.41 70 70 70h280c16.57 0 30 13.44 30 30s-13.43 30-30 30z"
                                p-id="31223" fill="#ffffff"></path>
                            <path
                                d="M712 742c-16.56 0-30-13.44-30-30v-60c0-16.56 13.44-30 30-30s30 13.44 30 30v60c0 16.56-13.44 30-30 30z"
                                p-id="31224" fill="#ffffff"></path>
                            <path
                                d="M812 742H712c-16.56 0-30-13.44-30-30s13.44-30 30-30h100c16.56 0 30 13.44 30 30s-13.44 30-30 30z"
                                p-id="31225" fill="#ffffff"></path>
                        </svg>
                    </div>
                    <div>
                        <p>7日内订单数量</p>
                        <p>￥6666</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg t="1669034180101" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="31221" width="44" height="44">
                            <path
                                d="M622 342H302c-16.57 0-30-13.43-30-30s13.43-30 30-30h320c16.56 0 30 13.43 30 30s-13.44 30-30 30zM462 542H302c-16.57 0-30-13.43-30-30s13.43-30 30-30h160c16.57 0 30 13.43 30 30s-13.43 30-30 30zM402 742H302c-16.57 0-30-13.44-30-30s13.43-30 30-30h100c16.57 0 30 13.44 30 30s-13.43 30-30 30zM712 942c-126.82 0-230-103.18-230-230s103.18-230 230-230 230 103.18 230 230-103.18 230-230 230z m0-400c-93.73 0-170 76.27-170 170s76.27 170 170 170 170-76.27 170-170-76.27-170-170-170z"
                                p-id="31222" fill="#ffffff"></path>
                            <path
                                d="M492 942H212c-71.68 0-130-58.32-130-130V212c0-71.68 58.32-130 130-130h500c71.68 0 130 58.32 130 130v206.97c0 16.57-13.44 30-30 30s-30-13.43-30-30V212c0-38.59-31.41-70-70-70H212c-38.59 0-70 31.41-70 70v600c0 38.59 31.41 70 70 70h280c16.57 0 30 13.44 30 30s-13.43 30-30 30z"
                                p-id="31223" fill="#ffffff"></path>
                            <path
                                d="M712 742c-16.56 0-30-13.44-30-30v-60c0-16.56 13.44-30 30-30s30 13.44 30 30v60c0 16.56-13.44 30-30 30z"
                                p-id="31224" fill="#ffffff"></path>
                            <path
                                d="M812 742H712c-16.56 0-30-13.44-30-30s13.44-30 30-30h100c16.56 0 30 13.44 30 30s-13.44 30-30 30z"
                                p-id="31225" fill="#ffffff"></path>
                        </svg>
                    </div>

                    <div>
                        <p>7日内订单收入</p>
                        <p>￥66666666.66</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="first_main">
            <h4>营收情况</h4>
            <ul class="agency">
                <li>
                    <div>
                        <svg t="1669110355446" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="47575" data-spm-anchor-id="a313x.7781069.0.i46"
                            width="48" height="48">
                            <path
                                d="M509.9008 519.8336m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z"
                                fill="#FFBC42" p-id="47576"></path>
                            <path
                                d="M593.3056 682.24c-29.7472 0-53.9136-24.1664-53.9136-53.9136v-95.9488c0-29.7472 24.1664-53.9136 53.9136-53.9136h202.24V416.6144c0-33.4848-27.136-60.672-60.672-60.672H234.5472v382.0032c0 33.4848 27.136 60.672 60.672 60.672h439.7568c33.4848 0 60.672-27.136 60.672-60.672v-55.7056h-202.3424zM593.3568 241.1008H285.7472c-28.2624 0-51.2 22.9376-51.2 51.2v23.2448h410.0096v-23.2448c0-28.2624-22.9376-51.2-51.2-51.2z"
                                fill="#FFFFFF" p-id="47577"></path>
                            <path
                                d="M593.3056 523.776c-7.424 0-13.4656 6.0416-13.4656 13.4656v85.7088c0 7.424 6.0416 13.4656 13.4656 13.4656h202.24v-112.64h-202.24z m39.7312 81.2544c-13.7728 0-24.8832-11.1616-24.8832-24.8832a24.87808 24.87808 0 1 1 49.7664 0c0 13.7216-11.1616 24.8832-24.8832 24.8832z"
                                fill="#FFFFFF" p-id="47578"></path>
                        </svg>
                    </div>
                    <div>
                        <p>15</p>
                        <p>待付款订单</p>
                    </div>
                </li>
                <li>
                    <div>
                    </div>
                    <svg t="1669110567286" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="50789" data-spm-anchor-id="a313x.7781069.0.i51"
                        width="48" height="48">
                        <path
                            d="M513.525238 0C231.624846 0 3.069407 228.498134 3.069407 510.454808s228.555439 510.454808 510.454808 510.454808c281.898345 0 510.453784-228.556463 510.453784-510.454808C1023.979022 228.556463 795.42256 0 513.525238 0zM764.639462 385.394511C684.634314 493.316475 604.620979 601.369424 524.614807 709.290365c-16.693194 22.560832-55.583946 38.817074-83.120093 19.750833-57.577347-39.756469-115.089202-79.502705-172.601056-119.200846-26.301016-18.192338-40.125883-47.228651-21.809725-75.580373 15.202237-23.61586 56.704466-38.075177 83.186607-19.816325 57.511855 39.688931 127.233799 87.923492 127.233799 87.923492 67.358107-90.913593 134.658909-181.829232 202.081485-272.677333C703.074292 270.988878 808.506553 326.201363 764.639462 385.394511z"
                            p-id="50790" fill="#1296db"></path>
                    </svg>
                    <div>
                        <p>25</p>
                        <p>待确认订单</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg t="1669110764990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="65359" width="48" height="48"><path d="M634.453333 461.013333c-8.96-9.386667-18.986667-17.92-29.44-25.6-1.706667-1.28-2.773333-2.133333-4.053333-2.773333a17.536 17.536 0 0 1-8.32-16.426667c0.426667-6.613333 4.48-12.373333 10.453333-15.146666 8.746667-3.84 14.506667-12.16 15.36-21.76-2.346667-17.28-18.133333-29.866667-35.626666-28.373334a37.226667 37.226667 0 0 0-17.92 4.053334c-1.706667 1.066667-3.626667 1.706667-5.546667 2.133333a21.610667 21.610667 0 0 1-21.546667-8.533333c-2.133333-2.986667-4.48-5.546667-7.253333-7.893334a6.485333 6.485333 0 0 1-1.706667-1.706666c-8.533333-8.96-22.826667-9.6-31.786666-1.066667-0.64 0.64-2.133333 2.133333-2.986667 2.773333-2.773333 2.346667-5.333333 4.906667-7.253333 7.893334-0.64 0.853333-1.28 1.706667-1.92 2.346666-5.12 5.12-12.586667 7.466667-19.626667 6.186667a20.010667 20.010667 0 0 1-5.973333-2.133333c-0.853333-0.426667-1.706667-0.853333-2.773334-1.28-4.906667-1.706667-9.173333-2.346667-13.44-2.56-19.2-1.706667-34.986667 11.093333-37.333333 28.373333 0.853333 9.386667 6.613333 17.92 15.36 21.76 5.973333 2.773333 10.026667 8.533333 10.453333 15.146667 0.426667 6.613333-2.773333 12.8-8.32 16.213333-1.28 0.853333-2.346667 1.706667-3.84 2.773333-10.666667 7.68-20.693333 16.426667-29.653333 25.6-26.24 24.32-41.173333 56.746667-42.453333 91.52 0 102.4 84.266667 139.306667 162.986666 139.306667h3.626667c78.933333 0 162.986667-36.693333 162.986667-139.946667-1.28-34.133333-16.213333-66.56-41.813334-90.24l-0.64-0.64z m-67.84 46.506667c9.813333 0 17.706667 7.893333 17.706667 17.706667s-7.893333 17.706667-17.706667 17.706666H529.066667v18.346667h37.546666c9.813333 0 17.706667 7.893333 17.706667 17.706667s-7.893333 17.706667-17.706667 17.706666H529.066667v32c0 9.813333-7.893333 17.706667-17.706667 17.706667s-17.706667-7.893333-17.706667-17.706667v-32h-36.053333c-9.813333 0-17.706667-7.893333-17.706667-17.706666s7.893333-17.706667 17.706667-17.706667h36.053333v-18.346667h-36.053333c-9.813333 0-17.706667-7.893333-17.706667-17.706666s7.893333-17.706667 17.706667-17.706667h26.24l-38.826667-38.826667a17.642667 17.642667 0 0 1 0-25.173333c7.04-7.04 18.133333-7.04 25.173334 0L512 485.546667l42.026667-42.026667c7.04-7.04 18.133333-7.04 25.173333 0 7.04 7.04 7.04 18.133333 0 25.173333l-38.826667 38.826667h26.24z" p-id="65360" fill="#d81e06"></path><path d="M512 85.333333C276.266667 85.333333 85.333333 276.266667 85.333333 512s190.933333 426.666667 426.666667 426.666667 426.666667-190.933333 426.666667-426.666667S747.733333 85.333333 512 85.333333z m1.92 642.133334h-3.626667c-120.746667 0-198.613333-68.906667-198.613333-175.573334 1.706667-45.013333 20.48-86.186667 53.12-116.266666 5.973333-6.186667 12.8-12.373333 19.84-18.346667-8.746667-10.453333-14.08-23.68-14.506667-37.546667v-2.346666c3.84-37.12 36.906667-64.853333 74.24-61.44 6.4-0.213333 13.44 1.066667 20.693334 3.413333 1.706667-1.706667 3.626667-3.413333 5.546666-5.12l1.92-1.92a58.154667 58.154667 0 0 1 81.28 1.92c1.92 1.493333 3.626667 3.2 5.333334 5.12 7.04-2.346667 14.293333-3.413333 22.4-3.413333 35.626667-3.2 68.906667 24.32 72.533333 61.44v2.346666c-0.426667 13.866667-5.76 27.093333-14.506667 37.546667 7.04 5.76 13.866667 12.16 20.266667 18.773333a164.714667 164.714667 0 0 1 52.693333 115.413334c0 107.093333-78.08 176-198.613333 176z" p-id="65361" fill="#d81e06"></path></svg>
                    </div>
                    <div>
                        <p>25</p>
                        <p>待处理退款</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="second_main">
            <h4>营收统计</h4>
            <div>

            </div>
            <Charts ref="chart_line_one"></Charts>
        </div>
    </div>
</template>
<script>
import Charts from './G_echart.vue'
export default {
    data() {
        return {
            name: '',
            xData: ['1-21', '2-21', '3-21', '4-21', '5-21', '6-21', '7-21', '8-24', '9-21', '10-21', '11-21', '12-21'],
            yData: [4000, 3800, 5500, 3660, 3221, 3255, 3665, 3133, 3548, 3323, 3333, 3138],
        }
    },
    mounted() {
        const { name, xData, yData } = this
        console.log(this.$refs)
        this.$refs.chart_line_one.initChart(name, xData, yData)
    },
    components: {
        Charts,
    }
}
</script>
<style scpoed>
* {
    text-align: left;
}

#box {
    width: calc(100% - 60px);
    padding: 35px 30px;
    background: #f0f0f0;
    overflow: hidden;
}

.top {
    width: 100%;
    line-height: 30px;
    text-align: left;
    font-size: 20px;
    font-weight: 700;
}

.el-tooltip__trigger:hover {
    background: none !important;
}

.first_main {
    width: calc(100% - 80px);
    margin-top: 20px;
    height: 140px;
    background: #fff;
    padding: 10px 40px;
}
.second_main {
    width: calc(100% - 80px);
    height: 500px;
    margin-top: 20px;
    background: #fff;
    padding: 10px 40px;
}
h4{
    margin-top: 10px;
}
.revenue,
.agency {
    width: calc(100% - 50px);
    height: 100%;
    display: flex;
    margin-top: 8px;
}

.revenue {
    justify-content: space-between;

}

.revenue>li {
    border-radius: 8px;
    width: 22%;
    height: calc(100% - 40px);
    list-style: none;
    display: flex;
    align-items: center;
    color: #fff;
}

.revenue>li:nth-child(1) {
    background: #ff7970;
}

.revenue>li:nth-child(2) {
    background: #ffd344;
}

.revenue>li:nth-child(3) {
    background: #648cff;
}

.revenue>li:nth-child(4) {
    background: #4fccb0;
}

.revenue>li>div:nth-child(1) {
    margin-left: 35px;
}

.revenue>li>div:nth-child(2)>p {
    margin-left: 15px;
    font-weight: 700;
}

.revenue>li>div:nth-child(2)>p:nth-child(1) {
    font-size: 12px;
    margin-bottom: 5px;
}

.agency>li {
    width: 33.333%;
    height: calc(100% - 60px);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.agency>li:nth-child(1) {
    border-right: 1px solid #999;
}

.agency>li:nth-child(2) {
    border-right: 1px solid #999;
}

.agency>li>div:nth-child(2)>p {
    margin-left: 15px;
    font-weight: 700;
}
.agency>li>div:nth-child(3)>p {
    margin-left: 15px;
    font-weight: 700;
}
</style>
